<template>
	<view class="wx-player">
		<!-- <live-player :src="optios.rtmpurl" autoplay @statechange="statechange" @error="error" style="width: 100%; height: 100%" /> -->
		<!-- <live-room-play
			liveAppID="wx95a7d2b78cf30f98"
			:playUrl="optios.m3u8url"
			@PlayEvent="onPlayEvent"
			:autoplay="true"
			@NetStatus="netStatusFn"
			@AttachedEvent="attachedEventFn"
		></live-room-play> -->
		<!--  -->
		<video :src="optios.m3u8url" :controls="false" :autoplay="true" class="wx-video" :poster="optios.image" @ended="endedFn" @waiting="waitingFn" @error="error" object-fit="cover"></video>
	</view>
</template>

<script>
// import liveRoomPlay from 'plugin://liveRoomPlugin/live-room-play';
export default {
	data() {
		return {};
	},
	props: {
		// 直播流
		url: {
			type: String,
			default: ''
		},
		optios: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	// components: { liveRoomPlay },
	methods: {
		statechange(e) {
			console.log('live-player code:', e.detail.code);
		},
		error(e) {
			console.log('live-player error:', e);
			// this.$emit('wxLiveError', e);
		},
		onPlayEvent(e) {
			// console.log(e, 'onPlayEvent');
		},
		netStatusFn(e) {
			// console.log(e, 'netStatusFn');
		},
		attachedEventFn(e) {
			// console.log(e, 'attachedEventFn');
		},
		endedFn(e) {
			// console.log(e, 'endedFnendedFn');
		},
		waitingFn(e) {
			// this.$emit('wxLiveWaiting', e);
			// console.log('live-player waiting:', e);
		}
	},
	mounted() {
		// console.log('log', this.optios.m3u8url);
	}
};
</script>

<style lang="scss">
.wx-player {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.wx-video {
	width: 100%;
	height: 100%;
}
</style>
